<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <link href="/layui/css/layui.css" media="all" rel="stylesheet">
        </link>
        <style>
        </style>
    </head>
    <body>
        <script src="/layui/layui.js">
        </script>
        <form class="layui-form">
            <table class="layui-table" id="demo" lay-filter="demo">
                <colgroup>
                    <col width="150">
                        <col width="150">
                            <col>
                            </col>
                        </col>
                    </col>
                </colgroup>
                <thead>
                     <tr>
                      <th colspan="1" rowspan="3">银行存款余额</th>
                      <th colspan="1" >户名</th>
                      <th colspan="1" >银行</th>
                      <th colspan="1" >帐号</th>
                      <th colspan="1" >金额</th>
                      <th colspan="1" >备注</th>
                    </tr>
                </thead>
                <tbody class="data-tbody">
                    <tr>
                        <td rowspan="3" class="td-row ">银行存款余额</td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入户名"  type="text" value=""/>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入银行" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入帐号" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入金额" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入备注" required="" type="text" value=""/>
                        </td>
                    </tr>
                </tbody>
            </table>
            {{csrf_field()}}
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit" lay-filter="formDemo" lay-submit="">
                        立即提交
                    </button>
                    <button class="layui-btn add" >添加一行</button>
                    <button class="layui-btn reduce" >减少一行</button>
                </div>
            </div>
        </form>

        <form class="layui-form">
            <table class="layui-table" id="demo2" lay-filter="demo2">
                <colgroup>
                    <col width="150">
                        <col width="150">
                            <col>
                            </col>
                        </col>
                    </col>
                </colgroup>
                <thead>
                     <tr>
                      <th colspan="1" rowspan="3">期末借款</th>
                      <th colspan="1" >借款人</th>
                      <th colspan="1" >借出时间</th>
                      <th colspan="1" >用途</th>
                      <th colspan="1" >审批人</th>
                      <th colspan="1" >金额</th>
                      <th colspan="1">备注</th>
                    </tr>
                </thead>
                <tbody class="demo2-data-tbody">
                    <tr>
                        <td rowspan="3" class="demo2-td-row ">期末借款</td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="借款人" required=""  type="text"/>
                        <td>
                            <input autocomplete="off" id ="date" lay-data="" class="layui-input datetime"  lay-verify="required" placeholder="借出时间" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="用途" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="审批人" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="金额" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="备注" type="text" value=""/>
                        </td>
                    </tr>
                </tbody>
            </table>
            {{csrf_field()}}
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit demo2" lay-filter="formDemo" lay-submit="">
                        立即提交
                    </button>
                    <button class="layui-btn demo2_add" >添加一行</button>
                    <button class="layui-btn demo2_reduce" >减少一行</button>
                </div>
            </div>
        </form>
    </body>
</html>
<script>
    //Demo
    layui.use(['form','table', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        //核心方法
        function timeAdd(){
             lay('.datetime').each(function() {
                 laydate.render({
                     elem : this,
                     trigger : 'click'
                 });
             });
         }
          //执行一个laydate实例
          laydate.render({
            elem: '.datetime' //指定元素
          });

        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log($(this).attr('class'));
            if ($(this).attr('class') == 'layui-btn submit demo2') {
                demo2();
                return false;
            }
            
            layer.msg('已提交');
            //layer.msg(JSON.stringify(data.field));
            var sum_data = [];
            $('.straight_alcohol').each(function () {
                var values = $(this).val();
                //straight_alcohol.push(values);
            });
            $('.data-tbody').children('tr').each(function () {
                var data = [];
                $(this).children('td:eq(0)').each(function () {
                    var text = $(this).text().replace(/\ +/g,"").replace(/[\r\n]/g,"");
                    data.push(text)
                });
                $(this).children('td:gt(0)').each(function () {
                    var val = $(this).children('input').val();
                    //console.log(val);
                    data.push(val);
                });
                sum_data.push(data);
            });
            
            var th_input = [];
            var th_input_with = [];
            $('.th_input').children('input').each(function () {
                th_input.push($(this).val()+'月进货');
                th_input_with.push($(this).val() + '月付款');
            });
            var head = ['银行存款余额', '户名', '银行', '帐号', '金额', '备注'];
            //console.log(th_input);
            table.exportFile(head, sum_data, '{{$title}}.csv'); //默认导出 csv，也可以为：xls
            return false;
        });

        // 表单提交demo2
        function demo2 () {

                var sum_data = [];

                $('.demo2-data-tbody').children('tr').each(function () {
                var data = [];
                $(this).children('td:eq(0)').each(function () {
                    var text = $(this).text().replace(/\ +/g,"").replace(/[\r\n]/g,"");
                    data.push(text)
                });
                $(this).children('td:gt(0)').each(function () {
                    var val = $(this).children('input').val();
                    //console.log(val);
                    data.push(val);
                });
                sum_data.push(data);
            });
            
            var th_input = [];
            var th_input_with = [];
            $('.th_input').children('input').each(function () {
                th_input.push($(this).val()+'月进货');
                th_input_with.push($(this).val() + '月付款');
            });
            var head = ['期末借款', '借款人', '借出时间', '用途', '审批人', '金额', '备注'];
            //console.log(th_input);
            console.log(sum_data);
            table.exportFile(head, sum_data, '{{$title}}.csv'); //默认导出 csv，也可以为：xls
        }

        // 增加
        $('.add').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            var html = '';
                    html += '<tr>';
                        html += '<td class="layui-hide">银行存款余额</td>';
                        html += '<td>';
                            html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入户名"  type="text" value=""/>';
                        html += '<td>';
                            html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入银行" required="" type="text" value=""/>';
                        html += '</td>';
                        html += '<td>';
                            html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入帐号" required="" type="text" value=""/>';
                        html += '</td>';
                        html += '<td>';
                            html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入金额" required="" type="text" value="0"/>';
                        html += '</td>';
                        html += '<td>';
                            html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入备注" required="" type="text" value=""/>';
                        html += '</td>';
                    html += '</tr>';

            $('.data-tbody').append(html);
            layer.msg('增加了'+index);
            $('.td-row').attr('rowspan', index + 1);
            return false;
        });
        // 增加
        $('.demo2_add').on('click', function () {
            var index = $('.demo2-data-tbody').children('tr').length;
            var html = '';
                html += '<tr>';
                    html += '<td class="layui-hide">期末借款</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="借款人"  type="text" value=""/>';
                    html += '<td>';
                        html += '<input autocomplete="off" id ="date" lay-data="" class="layui-input datetime"  lay-verify="required" placeholder="借出时间" required="" type="text" value=""/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="用途" required="" type="text" value=""/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="审批人" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="金额" required="" type="text" value=""/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="备注" required="" type="text" value=""/>';
                    html += '</td>';
                html += '</tr>';

            $('.demo2-data-tbody').append(html);
            layer.msg('增加了'+index);
            $('.demo2-td-row').attr('rowspan', index + 1);
            // 重新绑定
            form.render(); 
            timeAdd()
            return false;
        });
        // 减少
        $('.reduce').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            if (index <= 1) {
                layer.msg('保留'+index+'行');
                return false;
            }
            $('.data-tbody').children('tr')[index - 1].remove();
            return false;
        });

        // 减少
        $('.demo2_reduce').on('click', function () {
            var index = $('.demo2-data-tbody').children('tr').length;
            if (index <= 1) {
                layer.msg('保留'+index+'行');
                return false;
            }
            $('.demo2-data-tbody').children('tr')[index - 1].remove();
            return false;
        });

    });
</script>